<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/adminlte/css/skins/skin-black.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/weui-master/dist/style/weui.min.css">
    <link rel="stylesheet" type="text/css" href="css/goodsmanage.css">
    <style>

    </style>
</head>

<body class="hold-transition skin-black sidebar-mini">
    <div class="wrapper">
        <main-head></main-head>
        <main-sidebar></main-sidebar>
        <div class="content-wrapper">
            <section class="content-header">
                <b>商品管理</b> /<a href="#" @click="changeManagetype(1)"> 宝贝列表 </a>/<a href="#" @click="changeManagetype(2)"> 新增宝贝 </a>
            </section>
            <section class="content">
                <div class="contentbox1" v-show="managetype==1">
                    <div class="searchbox">
                        <input type="text" placeholder="输入名称可查找">
                        <button class="btn btn-primary">查找</button>
                    </div>
                    <div class="tabmenu">
                        <ul class="nav nav-tabs">
                            <li class="active" @click="changeGoodsState(1)"><a href="#1" data-toggle="tab">出售中</a></li>
                            <li @click="changeGoodsState(2)"><a href="#2" data-toggle="tab">售罄的</a></li>
                        </ul>
                    </div>
                    <div class="tablebox">
                        <table class="table ">
                            <thead>
                                <tr>
                                    <th style="width: 14%;">宝贝图片</th>
                                    <th style="width: 12%;">宝贝名称</th>
                                    <th style="width: 12%;">宝贝编码</th>
                                    <th style="width: 12%;">宝贝价格</th>
                                    <th style="width: 12%;">已售数量</th>
                                    <th style="width: 12%;">库存数量</th>
                                    <th style="width: 12%;">可售数量</th>
                                    <th style="width: 14%;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(goods,index) in goodslist" v-show="showOrHideTr(goods.leftnum,goods.cansellnum)">
                                    <td>
                                        <div class="item"><img :src="goods.imgs[0]" alt=""></div>
                                    </td>
                                    <td>
                                        <div class="item">{{goods.name}}</div>
                                    </td>
                                    <td>
                                        <div class="item">{{goods.code}}</div>
                                    </td>
                                    <td>
                                        <div class="item">{{goods.price}}</div>
                                    </td>
                                    <td>
                                        <div class="item">
                                            <span class="num">{{goods.sellnum}}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="item">
                                            <span class="num">{{goods.leftnum}}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="item">
                                            <span class="num">{{goods.cansellnum}}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="item itembuttons ">
                                            <button class="btn btn-default" @click="edit(index)">查看/编辑</button>
                                            <button class="btn btn-danger" @click="del(index)">删除</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="contentbox2" v-show="managetype==2">
                    <div class="tabmenu">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#1" data-toggle="tab" @click="changeEditType(1)">商品信息</a></li>
                            <li @click="changeEditType(2)"><a href="#2" data-toggle="tab">商品图片</a></li>
                            <li @click="changeEditType(3)"><a href="#2" data-toggle="tab">商品详情</a></li>
                        </ul>
                    </div>
                    <div class="goodsinfo" v-show="edittype==1">
                        <div class="goodsinfoleft">
                            <div class="item">
                                <span>商品编号</span>
                                <input type="text" v-model.trim="goods.code">
                            </div>
                            <div class="item">
                                <span>商品名称</span>
                                <input type="text" v-model.trim="goods.name">
                            </div>
                            <div class="item">
                                <span>商品类别</span>
                                <input type="text" v-model.trim="goods.type">
                            </div>
                            <div class="item">
                                <span>价格</span>
                                <input type="text" v-model.trim="goods.price">
                            </div>
                            <div class="item">
                                <span>规格</span>
                                <input type="text" v-model.trim="goods.norms">
                            </div>
                            <div class="item">
                                <span>单位</span>
                                <input type="text" v-model.trim="goods.unit">
                            </div>
                        </div>
                        <div class="goodsinforight">
                            <div class="item">
                                <span>已售数量</span>
                                <div class="numdiv">
                                    <button class="btn numbtn" @click="computeNum(1,-1)">-</button>
                                    <input type="text" class="num" v-model.trim="goods.sellnum">
                                    <button class="btn numbtn" @click="computeNum(1,1)">+</button>
                                </div>
                            </div>
                            <div class="item">
                                <span>库存数量</span>
                                <div class="numdiv">
                                    <button class="btn numbtn" @click="computeNum(2,-1)">-</button>
                                    <input type="text" class="num" v-model.trim="goods.leftnum">
                                    <button class="btn numbtn" @click="computeNum(2,1)">+</button>
                                </div>
                            </div>
                            <div class="item">
                                <span>可售数量</span>
                                <div class="numdiv">
                                    <button class="btn numbtn" @click="computeNum(3,-1)">-</button>
                                    <input type="text" class="num" v-model.trim="goods.cansellnum">
                                    <button class="btn numbtn" @click="computeNum(3,1)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="goodsimgs" v-show="edittype==2">
                        <div class="addimg">
                            <button class="btn btn-primary" @click="clickBtnAddImg">添加图片</button>
                            <input id="btnAddImg" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none;" @change="uploadImg()">
                        </div>
                        <div class="itembox">
                            <div class="item">
                                <img src="../img/renqi1.png" alt="">
                            </div>
                            <div class="item">
                                <img src="../img/renqi1.png" alt="">
                            </div>
                            <div class="item">
                                <img src="../img/renqi1.png" alt="">
                            </div>
                            <div class="item">
                                <img src="../img/renqi1.png" alt="">
                            </div>
                            <div class="item">
                                <img src="../img/renqi1.png" alt="">
                            </div>
                            <div class="item">
                                <img src="../img/renqi1.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="goodsdetail" v-show="edittype==3">
                        <script type="text/plain" id="myEditor" style="width:99.8%;max-height: 350px;overflow-y: auto;">
                            <p>这里我可以写一些输入提示</p>
                        </script>
                    </div>
                    <div class="buttons">
                        <button class="btn btn-default" @click="backlist">返回</button>
                        <button class="btn btn-primary" @click="save">保存</button>
                    </div>
                </div>
        </div>
    </div>
    </div>
    <script src="../ueditor/ueditor.config.js"></script>
    <script src="../ueditor/ueditor.all.min.js"></script>
    <script src="../lib/AdminLTE/lib/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../lib/AdminLTE/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../lib/AdminLTE/lib/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="../lib/AdminLTE/lib/adminlte/js/app.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="js/mainHeader.js"></script>
    <script src="js/mainSidebar.js"></script>
    <script src="js/goodsmanage.js"></script>
</body>

</html>
